﻿<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="It is a simple product landing website" />
    <meta name="keywords" content="Bensen,product,onepage,app,promote,agency,business" />


    <!--====== TITLE TAG ======-->
    <title>Bensen-App landing Template</title>


    <!--====== STYLESHEETS =======-->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/animate.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/icofont.css">
    <link rel="stylesheet" href="assets/css/modal-video.min.css">

    <!--====== OWL CAROUSEL STYLESHEETS ======-->
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/owl.theme.default.min.css">

    <!--====== MAIN STYLESHEETS ======-->
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/responsive.css" rel="stylesheet">

</head>

<body data-spy="scroll" data-target="#main-nav" data-offset="60">

    <!--START TOP AREA-->
    <nav class="navbar navbar-expand-lg site-navigation fixed-top app-nav">
        <div class="container">
            <a class="navbar-brand page-scroll" href="#"><img src="assets/img/logo-b.png" alt="s-box" class="img-fluid"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"><i class="fa fa-bars"></i></span>
            </button>

            <div class="collapse navbar-collapse " id="navbarNav">
                <ul class="navbar-nav ">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-scroll-nav="0">
                         Home
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="index.html">Home-default</a>
                            <a class="dropdown-item" href="index-2.html">Home-slider</a>
                            <a class="dropdown-item" href="index-3.html">Home-app</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " href="#about" data-scroll-nav="1">Specifications</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " href="#feature" data-scroll-nav="2">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " href="#services" data-scroll-nav="3">services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " href="#pricing" data-scroll-nav="4">Pricing</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " href="#gallery" data-scroll-nav="5">Gallery</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " href="#footer-area" data-scroll-nav="6">Contact</a>
                    </li>
                </ul>
            </div>
            <ul class="list-inline top-social d-none d-lg-block">
                <li class="list-inline-item">
                    <a href="#"> <i class="fa fa-facebook"></i></a>
                </li>
                <li class="list-inline-item">
                    <a href="#"> <i class="fa fa-twitter"></i></a>
                </li>
                <li class="list-inline-item">
                    <a href="#"> <i class="fa fa-linkedin"></i></a>
                </li>
            </ul>
        </div>
    </nav>
    <!--END TOP AREA-->

    <!--BANNER AREA START-->
    <div class="banner-bg-app p-3 p-md-5" data-scroll-index="0">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 col-sm-12">
                    <div class="app-banner-content ">
                        <h5 class="subtitle">Bensen delivers</h5>
                        <h1 class="lg-title">awesome <br>sounds</h1>
                        <p>Received overcame oh sensible so at an. Formed do change merely to county it. Am separate contempt domestic to to oh. On relation my so addition branched.</p>
                        <a href="#feature" class="btn btn-feature btn-circled">Features<i class="fa fa-angle-double-right"></i></a>
                    </div>
                </div>

                <div class="col-lg-5 col-sm-12 d-sm-none d-lg-block d-md-none text-right">
                    <div class="banner-app-img app-padding">
                        <img src="assets/img/app/about.png" alt="" class="img-fluid">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--BANNER AREA END-->

    <!--ABOUT AREA START-->
    <section id="about" data-scroll-index="1">
        <div class="about-bg"></div>
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-sm-12 col-md-6">
                    <div class="about-block">
                        <h5 class="subtitle">SPECIFICATION YOU WILL LOVE</h5>
                        <h3 class="md-title">Technical <br>Details!</h3>
                        <p>Now residence dashwoods she excellent you. Shade being under his bed her. Much read on as draw. Blessing for ignorant exercise any yourself unpacked. Pleasant horrible but confined day end marriage. Eagerness furniture set preserved far recommend.</p>

                        <a href="#" class="btn btn-trans-white btn-circled">LEARN MORE</a>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-12 col-md-6">
                    <div class="carousel slide" id="about-carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#about-carousel" data-slide-to="0" class="active"></li>
                            <li data-target="#about-carousel" data-slide-to="1"></li>
                            <li data-target="#about-carousel" data-slide-to="2"></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="about-box">
                                            <h2>Wi-Fi </h2>
                                            <p>Dual-band Wi-Fi supports 802.11 a/b/g/n (2.4 and 5 GHz) networks. Does not support connecting to ad-hoc (or peer-to-peer) Wi-Fi networks.</p>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="about-box">
                                            <h2>AUDIO</h2>
                                            <p>Built-in speaker for voice feedback when not connected to external speakers. 3.5 mm stereo audio output for use with external speakers (audio cable not included).</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="about-box">
                                            <h2>Network</h2>
                                            <p>Dual-band Wi-Fi supports 802.11 a/b/g/n (2.4 and 5 GHz) networks. Does not support connecting to ad-hoc (or peer-to-peer) Wi-Fi networks.</p>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="about-box">
                                            <h2>Voice</h2>
                                            <p>Built-in speaker for voice feedback when not connected to external speakers. 3.5 mm stereo audio output for use with external speakers (audio cable not included).</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <a class="carousel-control-prev" href="#about-carousel" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                      </a>
                        <a class="carousel-control-next" href="#about-carousel" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                      </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--ABOUT AREA 	END-->

    <!--FEATURE AREA START-->
    <section id="feature" data-scroll-index="2">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-sm-12 m-auto">
                    <div class="heading text-center">
                        <h5 class="subtitle">From anywhere of your room</h5>
                        <h2 class="md-title">Tons of features!</h2>
                        <p>Have one Alexa and two first gen Dots. Each of the Dots are using "Echo" as their wake-up word and at opposite ends of the house, no prob.</p>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-4 col-sm-6">
                    <div class="app-feature-box">
                        <i class="fa fa-diamond"></i>
                        <h4>Modern Design</h4>
                        <p>Esse eaque odit ducimus architecto at error perspiciatis magni cumque optio</p>
                        <a href="#" class="learn-more">read more</a>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="app-feature-box">
                        <i class="fa fa-diamond"></i>
                        <h4>Lots of features</h4>
                        <p>Esse eaque odit ducimus architecto at error perspiciatis magni cumque optio</p>
                        <a href="#" class="learn-more">read more</a>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="app-feature-box">
                        <i class="fa fa-diamond"></i>
                        <h4>Clean UI</h4>
                        <p>Esse eaque odit ducimus architecto at error perspiciatis magni cumque optio</p>
                        <a href="#" class="learn-more">read more</a>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="app-feature-box">
                        <i class="fa fa-diamond"></i>
                        <h4>Ease to use</h4>
                        <p>Esse eaque odit ducimus architecto at error perspiciatis magni cumque optio</p>
                        <a href="#" class="learn-more">read more</a>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="app-feature-box">
                        <i class="fa fa-diamond"></i>
                        <h4>non stop music</h4>
                        <p>Esse eaque odit ducimus architecto at error perspiciatis magni cumque optio</p>
                        <a href="#" class="learn-more">read more</a>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="app-feature-box">
                        <i class="fa fa-diamond"></i>
                        <h4>Less wight</h4>
                        <p>Esse eaque odit ducimus architecto at error perspiciatis magni cumque optio</p>
                        <a href="#" class="learn-more">read more</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--FEATURE AREA END-->

    <!--ABOUT AREA START-->
    <section id="services" data-scroll-index="3" class="bg-dark">
        <div class="service-bg-img d-none d-lg-block "></div>
        <div class="container">
            <div class="row">
                <div class="col-lg-5 offset-lg-7 offset-sm-12">
                    <div class="row">
                        <div class="col-lg-12 col-sm-12">
                            <div class="service-block">
                                <div class="service-icon">
                                    <i class="fa fa-diamond"></i>
                                </div>

                                <h4>Voice control your home </h4>
                                <p>Be concern parlors settled or do shyness address.Remainder northward</p>
                            </div>
                        </div>
                        <div class="col-lg-12 col-sm-12">
                            <div class="service-block">
                                <div class="service-icon">
                                    <i class="fa fa-diamond"></i>
                                </div>

                                <h4>Play your favourite music </h4>
                                <p>Be concern parlors settled or do shyness address.Remainder northward</p>
                            </div>
                        </div>
                        <div class="col-lg-12 col-sm-12">
                            <div class="service-block">
                                <div class="service-icon">
                                    <i class="fa fa-diamond"></i>
                                </div>

                                <h4>Manage your whole day Schedule.</h4>
                                <p>Be concern parlors settled or do shyness address.Remainder northward</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--ABOUT AREA 	END-->

    <!-- PROCESS AREA START-->
    <section id="process">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-4 col-sm-6">
                    <div class="process-box">
                        <i class="fa fa-shopping-basket"></i>
                        <h4>Buy Your product</h4>
                        <div class="line"></div>
                        <p>In up so discovery my middleton eagerness dejection explained. Estimating excellence ye contrasted insensible as. </p>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="process-box">
                        <i class="fa fa-download"></i>
                        <h4>Download app</h4>
                        <div class="line"></div>
                        <p>In up so discovery my middleton eagerness dejection explained. Estimating excellence ye contrasted insensible as. </p>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="process-box">
                        <i class="fa fa-microphone"></i>
                        <h4>Enjoy the moment</h4>
                        <div class="line"></div>
                        <p>In up so discovery my middleton eagerness dejection explained. Estimating excellence ye contrasted insensible as. </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- PROCESS AREA END-->

    <!-- PARALLAX VIDEO AREA START-->
    <section id="parallax" class="bg-feature">
        <div class="container">
            <div class="row">
                <div class="col-lg-5 col-sm-5">
                    <div class="parallax-content">
                        <h3 class="md-title">The best <br>one for your home!</h3>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-7 offset-lg-1">
                    <div class="video-bg">
                        <img src="assets/img/video-bg.jpg" alt="" class="img-fluid">
                        <a class="video-overlay-content promo-video" href="" data-video-id="QoSGMKKqghQ">
                                    <i class="icofont icofont-play"></i>
                                    <h4>watch the promo video</h4>
                            </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- PARALLAX VIDEO AREA END-->

    <!--  TESTIMONIAL AREA START  -->
    <section id="testimonial">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 m-auto col-sm-12">
                    <div class="carousel slide" id="review-carousel" data-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <div class="review-content">
                                    <i class="icofont icofont-quote-left"></i>
                                    <p>Creative and supportive agency to work with . must recommended to do your work. They are really proefssional and very polite with.</p>
                                    <div class="client-info">
                                        <h4>Mike Hussy</h4>
                                        <div class="rating">
                                            <span><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="review-content">
                                    <i class="icofont icofont-quote-left"></i>
                                    <p>Creative and supportive agency to work with . must recommended to do your work. They are really proefssional and very polite with.</p>
                                    <div class="client-info">
                                        <h4>John Smith</h4>
                                        <div class="rating">
                                            <span><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="review-content">
                                    <i class="icofont icofont-quote-left"></i>
                                    <p>Creative and supportive agency to work with . must recommended to do your work. They are really proefssional and very polite with.</p>
                                    <div class="client-info">
                                        <h4>Jake martin</h4>
                                        <div class="rating">
                                            <span><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                            <span><i class="fa fa-star"></i></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--  TESTIMONIAL AREA END -->

    <!--PRICING AREA START-->
    <section id="pricing" data-scroll-index="4">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 m-auto">
                    <div class="heading text-center">
                        <h3 class="md-title">Our Pricing</h3>
                        <p>Have one Alexa and two first gen Dots. Each of the Dots are using "Echo" as their wake-up word and at opposite ends of the house, no prob.</p>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-4 col-sm-6">
                    <div class="pricing-block active">
                        <span class="price-title">Standard</span>
                        <h5 class="price-sub">best enough to make a start</h5>
                        <h3 class="pricing">10<small>$</small></h3>
                        <p>Reprehenderit rem, vel quisquam alias corporis odit sequi tempore amet. </p>
                        <ul>
                            <li> <i class="icofont icofont-tick-mark"></i>10gb space</li>
                            <li><i class="icofont icofont-tick-mark"></i>Powerful bass</li>
                            <li><i class="icofont icofont-tick-mark"></i>24/7 hours service</li>
                        </ul>
                        <a href="#" class="btn btn-feature btn-circled">Purchase</a>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="pricing-block">
                        <span class="price-title">Featured</span>
                        <h5 class="price-sub">best enough to make a start</h5>
                        <h3 class="pricing">20<small>$</small></h3>
                        <p>Reprehenderit rem, vel quisquam alias corporis odit sequi tempore amet. </p>
                        <ul>
                            <li> <i class="icofont icofont-tick-mark"></i>10gb space</li>
                            <li><i class="icofont icofont-tick-mark"></i>Powerful bass</li>
                            <li><i class="icofont icofont-tick-mark"></i>24/7 hours service</li>
                        </ul>
                        <a href="#" class="btn btn-dark btn-circled">Purchase</a>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="pricing-block">
                        <span class="price-title">Business</span>
                        <h5 class="price-sub">best enough to make a start</h5>
                        <h3 class="pricing">30<small>$</small></h3>
                        <p>Reprehenderit rem, vel quisquam alias corporis odit sequi tempore amet. </p>
                        <ul>
                            <li> <i class="icofont icofont-tick-mark"></i>10gb space</li>
                            <li><i class="icofont icofont-tick-mark"></i>Powerful bass</li>
                            <li><i class="icofont icofont-tick-mark"></i>24/7 hours service</li>
                        </ul>
                        <a href="#" class="btn btn-dark btn-circled">Purchase</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--PRICING AREA END-->


    <!-- GALLERY AREA START-->
    <section id="gallery" data-scroll-index="5">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 m-auto col-sm-12">
                    <div class="heading text-center">
                        <h5 class="subtitle">Minimal Design layout</h5>
                        <h2 class="md-title">Products gallery</h2>
                        <p>Molestias illo quos incidunt ad asperiores labore explicabo, sed neque sint eum consequatur commodi, autem doloribus eligendi placeat facilis.</p>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="gallery-item owl-carousel owl-theme">
                    <div class="gallery-img">
                        <img src="assets/img/gallery/show-1.jpg" alt="" class="img-fluid">
                    </div>
                    <div class="gallery-img">
                        <img src="assets/img/gallery/show-2.jpg" alt="" class="img-fluid">
                    </div>
                    <div class="gallery-img">
                        <img src="assets/img/gallery/show-3.jpg" alt="" class="img-fluid">
                    </div>
                    <div class="gallery-img">
                        <img src="assets/img/gallery/show-4.jpg" alt="" class="img-fluid">
                    </div>
                    <div class="gallery-img">
                        <img src="assets/img/gallery/show-3.jpg" alt="" class="img-fluid">
                    </div>
                    <div class="gallery-img">
                        <img src="assets/img/gallery/show-2.jpg" alt="" class="img-fluid">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- GALLERY AREA END-->


    <!--FOOTER AREA-->
    <footer id="footer-area" class="" data-scroll-index="6">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="footer-top-area">
                        <h3>Avaliable at local store</h3>

                        <div class="row">
                            <div class="col-lg-4 col-sm-4">
                                <div class="footer-contact">
                                    <div class="footer-icon">
                                        <i class="icofont icofont-map-pins"></i>
                                    </div>
                                    <h4>MAin Office</h4>
                                    <p>North asia, 7/6 poal street shop</p>
                                </div>
                            </div>

                            <div class="col-lg-4 col-sm-4">
                                <div class="footer-contact">
                                    <div class="footer-icon">
                                        <i class="icofont icofont-mobile-phone"></i>
                                    </div>
                                    <h4>Contact now</h4>
                                    <p>+56-7879084</p>
                                    <p>+26-7879084</p>
                                </div>
                            </div>

                            <div class="col-lg-4 col-sm-4">
                                <div class="footer-contact">
                                    <div class="footer-icon">
                                        <i class="icofont icofont-envelope"></i>
                                    </div>
                                    <h4>Email us</h4>
                                    <p>company@email.com</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-4 col-sm-4">
                    <div class="footer-logo">
                        <img src="assets/img/logo-w.png" alt="Footer logo" class="img-fluid">
                    </div>
                </div>

                <div class="col-lg-8 col-sm-8">
                    <div class="footer-content">
                        <p>I have one Alexa and two first gen Dots. Each of the Dots are using "Echo" as their wake-up word and at opposite ends of the house, no prob.</p>

                        <h6 class="copy"> &copy; copyright By <a href="http://www.bootstrapmb.com/">bootstrapmb</a> to dreambuzz. 2018</h6>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!--FOOTER AREA END-->


    <!--====== SCRIPTS JS ======-->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/vendor/popper.min.js"></script>
    <script src="assets/js/vendor/bootstrap.min.js"></script>

    <!--====== PLUGINS JS ======-->

    <script src="assets/js/waypoints.min.js"></script>
    <script src="assets/js/scrollit.js"></script>
    <script src="assets/js/owl-carousel.2.3.0.min.js"></script>
    <script src="assets/js/jquery-modal-video.min.js"></script>

    <!--===== Custom ACTIVE JS=====-->
    <script src="assets/js/main.js"></script>
</body>

</html>